.kg-node {
  stroke: rgba(255, 255,255, 0.7);
  cursor: pointer;
  transition: stroke-width 0.3s;
}

.node-image {
  cursor: pointer;
}

.node-hover {
  stroke-width: 5px;
}
@keyframes selectingFlash{
  0%{
    stroke-width: 0px;
    stroke: none;
  }
  50%{
    stroke-width: 5px;
    stroke: rgba(224, 229, 233, 0.8);
  }
  100%{
  }
}
@keyframes selectingRotate{
  0%{
    stroke-width: 3px;
    stroke-dasharray: 15;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-width: 6px;
    stroke-dasharray: 15;
    stroke-dashoffset: 5;
  }
  100%{

  }
}
.selecting {
  animation: selectingFlash 1s ease-in both infinite;;
}

.menu-item {
  fill: #00b3ae;
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
  }

  50% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -35;
  }
  100% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -124;
  }
}
.menu-item {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #373e41;
  stroke-width: 0;
  fill: #6162cef2;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 1.5s linear forwards;
  cursor: pointer;
  transition: fill 0.3s;
}
.menu-item:hover {
  fill: #7bd7ff;
}
.menu-text {
  font-size: 8px;
  color: rgb(255, 255, 255);
  fill: rgb(255, 255, 255);
  pointer-events: none;
}
.sub-menu-text {
  font-size: 8px;
  color: rgb(255, 255, 255);
  fill: rgb(255, 255, 255);
  pointer-events: none;
}

.sub-menu-item {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #4b5458;
  stroke-width: 0;
  fill: #20bf71;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 1.5s linear forwards;
  cursor: pointer;
  transition: fill 0.3s;
}

.sub-menu-item:hover {
  fill: #83fac8;
}

.dashOut {
  transition: all ease 0.3s;
  opacity: 0;
  visibility: hidden;
}